@circlebox_width: 600px;
@circle-sub_color1: #F7B824;
@circle-sub_color2: #5FB878;
@circle-sub_color3: #009688;
@circle-sub_color4: #1E9FFF;
.choose-box{
    width: 80%;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    .circle{
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 50%;
        text-align: center;
        font-size: 32px;
        letter-spacing: 5px;
        color: #fff;
        position: relative;
        z-index: 999;
    }
    @media screen and (max-width: 1920px) {
        .circle{
            font-size: 26px;
        }
    }
    @media screen and (max-width: 1440px) {
        .circle{
            font-size: 22px;
        }
    }
    @media screen and (max-width: 1240px){
        .circle{
            font-size: 18px;
        }
    }
    @media screen and (max-width: 960px){
        .circle{
            font-size: 16px;
        }
    }
    .circle-center{
        position: absolute;
        display: table;
        width: 28%;
        height: 28%;
        top:36%;
        left: 36%;
        .circle{
            background-color: #ccc;
        }
     }
     .circle-around{
        width: 100%;
        height: 100%;
        position: relative;
        li{
            width: 28%;
            height: 28%;
            position: absolute;
            display: table;
            span{
                position: absolute;
                display: block;
            }
            .circle:hover{
                opacity: .9;
                filter: alpha(opacity=90);
            }
        }
     }
     .circle-sub1{
        top: 0;
        left: 36%;
        .circle{
            background-color: @circle-sub_color1;
        }
        span{
           background-color: @circle-sub_color1; 
        }
        span.juxing{
            width: 16.7%;
            height: 8.4%;
            top: 115.5%;
            left: 41.6%;
        }
        span.sanjiao{
            width: 33.4%;
            height: 8.4%;
            top: 109%;
            left: 33.3%;
            &:before,&:after{
                display: block;
                content: "";
                width: 60%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                top: 0;
                
            }
            &:before{
                left: 0;
                transform:rotate(-27deg);
                -ms-transform:rotate(-27deg);     /* IE 9 */
                transform-origin: left bottom;
                -ms-transform-origin: left bottom;
            }
            &:after{
                right: 0;
                transform:rotate(27deg);
                -ms-transform:rotate(27deg);     /* IE 9 */
                transform-origin: right bottom;
                -ms-transform-origin: right bottom;
            }
        }
     }
     .circle-sub2{
        top: 36%;
        left: 72%;
        .circle{
            background-color: @circle-sub_color2;
        }
        span{
           background-color: @circle-sub_color2; 
        }
        span.juxing{
            width: 8.4%;
            height: 16.7%;
            top:41.6%;
            left: -23%;
        }
        span.sanjiao{
            width: 8.4%;
            height: 33.4%;
            top: 33.2%;
            left: -15.5%;
            &:before,&:after{
                display: block;
                content: "";
                width: 100%;
                height: 60%;
                background-color: #fff;
                position: absolute;
                left: 0;
                
            }
            &:before{
                top: 0;
                transform:rotate(-27deg);
                -ms-transform:rotate(-27deg);     /* IE 9 */
                transform-origin: left top;
                -ms-transform-origin: left top;
            }
            &:after{
                bottom: 0;
                transform:rotate(27deg);
                -ms-transform:rotate(27deg);     /* IE 9 */
                transform-origin: left bottom;
                -ms-transform-origin: left bottom;
            }
        }
     }
     .circle-sub3{
        bottom: 0;
        left: 36%;
        .circle{
            background-color: @circle-sub_color3;
        }
        span{
           background-color: @circle-sub_color3; 
        }
        span.juxing{
            width: 16.7%;
            height: 8.4%;
            bottom: 115.5%;
            left: 41.6%;
        }
        span.sanjiao{
            width: 33.4%;
            height: 8.4%;
            bottom: 108%;
            left: 33.3%;
            &:before,&:after{
                display: block;
                content: "";
                width: 60%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                top: 0;
                
            }
            &:before{
                left: 0;
                transform:rotate(27deg);
                -ms-transform:rotate(27deg);     /* IE 9 */
                transform-origin: left top;
                -ms-transform-origin: left top;
            }
            &:after{
                right: 0;
                transform:rotate(-27deg);
                -ms-transform:rotate(-27deg);     /* IE 9 */
                transform-origin: right top;
                -ms-transform-origin: right top;
            }
        }
     }
     .circle-sub4{
        top: 36%;
        left: 0;
        .circle{
            background-color: @circle-sub_color4;
        }
        span{
           background-color: @circle-sub_color4; 
        }
        span.juxing{
            width: 8.4%;
            height: 16.7%;
            top: 41.6%;
            right: -23%;
        }
        span.sanjiao{
            width: 8.4%;
            height: 33.4%;
            top: 33.2%;
            right: -15.5%;
            &:before,&:after{
                display: block;
                content: "";
                width: 100%;
                height: 60%;
                background-color: #fff;
                position: absolute;
                left: 0;
                
            }
            &:before{
                top: 0;
                transform:rotate(27deg);
                -ms-transform:rotate(27deg);     /* IE 9 */
                transform-origin: right top;
                -ms-transform-origin: right top;
            }
            &:after{
                bottom: 0;
                transform:rotate(-27deg);
                -ms-transform:rotate(-27deg);     /* IE 9 */
                transform-origin: right bottom;
                -ms-transform-origin: right bottom;
            }
        }
     }
}